<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">
    <xiong-big></xiong-big>
    <xiong-er></xiong-er>
  </div>

  <script src="./scripts/vue.js"></script>
  <script>
    // 兄弟组件如果想实现传值： 需要借助事件中心
    // 所谓的事件中心，就是一个新的 Vue 实例

    // 这个实例，就是事件中心
    var bus = new Vue()

    Vue.component('xiong-big', {
      data: function () {
        return {
          name: '熊大',
          info: ''
        }
      },
      template: `
        <div>
          <p>{{ name }}</p>
          <p>找谁玩 ？ {{ info }}</p>
          <button @click="sureHandle">确定嘛？</button><hr />
        </div>
      `,
      methods: {
        sureHandle () {
          bus.$emit('qiang2', '不好玩')
        }
      },
      mounted() {
        // 因为事件是挂载到 bus 事件中心中的
        // 所以需要在 bus 这个事件中心中调用这个事件
        bus.$on('qiang', (params) => {
          console.log(params)
          this.info = params
        })
      }
    })

    Vue.component('xiong-er', {
      data: function () {
        return {
          name: '熊二',
          info: ''
        }
      },
      template: `
        <div>
          <p>{{ name }}, 好嘛 ？</p>
          <p>{{ info }}</p>
          <button @click="handle">发送事件</button>
        </div>
      `,
      methods: {
        handle () {
          // qiang 是自定义的事件名称, 这个事件是挂载到 bus 这个事件中心里面，
          // 类似在 bus 事件中心中存在 qiang 这个事件
          bus.$emit('qiang', '光头强')
        }
      },
      mounted () {
        bus.$on('qiang2', (params) => {
          console.log(params)
          this.info = params
        })
      }
    })
   
    var vm = new Vue({
      el: '.box',
      data: {
        age: 3,
        num: null
      }
    })
  </script>
</body>

</html>